<template>
  <RouterView>
    <template #default="{ Component, route }">
      <Header :class="`${prefixCls}-header`">
        <div :class="`${prefixCls}-left`">
          <!-- logo -->
          <AppLogo 
            :class="`${prefixCls}-logo`" style="width: 48px" :tenantConfig="tenantConfig" />
        </div>
      </Header>
      <Layout :class="`${prefixCls}-main`">
        <keep-alive v-if="openCache" :include="getCaches">
          <div :class="`${prefixCls}-main`">
            <component :is="Component" :key="route.fullPath"/>
          </div>
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />

        <LayoutFooter />
      </Layout>
    </template>
  </RouterView>
  <FrameLayout v-if="getCanEmbedIFramePage" />
</template>

<script lang="ts">
  import { computed, defineComponent, unref } from 'vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import FrameLayout from '/@/layouts/iframe/index.vue';
  import { AppLogo } from '/@/components/Application';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { Layout } from 'ant-design-vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
  import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
  import { getTransitionName } from './transition';

  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
  import { useUserStore } from '/@/store/modules/user';
  export default defineComponent({
    name: 'SimpleLayout',
    components: { 
      FrameLayout, Header: Layout.Header, 
      AppLogo, Layout,
      LayoutFooter: createAsyncComponent(() => import('/@/layouts/simple/footer/index.vue')),
    },
    setup() {
      const { getShowMultipleTab } = useMultipleTabSetting();
      const tabStore = useMultipleTabStore();
      const { prefixCls } = useDesign('simple-layout');
      const tenantConfig = useUserStore().getSelectTenant;
      
      const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();

      const { getBasicTransition, getEnableTransition } = useTransitionSetting();

      const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));

      const getCaches = computed((): string[] => {
        if (!unref(getOpenKeepAlive)) {
          return [];
        }
        return tabStore.getCachedTabList;
      });

      return {
        tenantConfig,
        prefixCls, 
        getTransitionName,
        openCache,
        getEnableTransition,
        getBasicTransition,
        getCaches,
        getCanEmbedIFramePage,
      };
    },
  });
</script>

<style lang="less">
  // @import './index.less';
  // 默认隐藏顶部菜单面包屑
  //顶部欢迎语展示样式
  @prefix-cls: ~'@{namespace}-simple-layout';
  
  .@{prefix-cls} {
    &-main {
      height: calc(100vh - 64px)
    }

    &-header {
      display: flex;
      padding: 0 8px;
      align-items: center;
      background-color: #ffffff;
      
      .headerIntroductionClass {
        margin-right: 4px;
        margin-bottom: 2px;
        border-bottom: 0px;
        border-left: 0px;
      }
    }
  }
</style>